<template>
  <div class="subset">
    <yk-space wrap>
      <div class="subset__menu" :class="{ 'subset__menu-selected': selected === '-1all' }"
        @click="changeOption(-1, 'all')">
        全部{{ subsetStore.count }}
      </div>
      <template v-if="props.classify === 0">
        <div class="subset__menu" v-for="item in state" :key="item.id"
          :class="{ 'subset__menu-selected': selected === item.id + 'state' }" @click="changeOption(item.id, 'state')">
          {{ item.name }}{{ item.value }}
        </div>
      </template>
      <div class="subset__menu" :class="{ 'subset__menu-selected': selected === subsetStore.exclude.id + 'exclude' }"
        @click="changeOption(subsetStore.exclude.id, 'exclude')">
        {{ subsetStore.exclude.name }}{{ subsetStore.exclude.value }}
      </div>
      <div class="subset__menu" v-for="item in subsetStore.data" :key="item.id"
        :class="{ 'subset__menu-selected': selected === item.id + 'subset' }" @click="changeOption(item.id, 'subset')">
        {{ item.name }}{{ item.value }}
      </div>
    </yk-space>
    <yk-space style="flex: none;">
      <yk-popconfirm title="我自定义的标题" @cancel="cancel" @confirm="confirm(props.classify)" placement="bottom">
        <yk-text type="primary">
          <IconCirclePlusOutline style="margin-right: 4px;"></IconCirclePlusOutline>
          新建分组
        </yk-text>
        <template #content>
          <div style="margin: 8px 4px 16px;">
            <yk-input show-counter :limit="6" placeholder="请输入" style="width: 208px;" v-model="inputValue"></yk-input>
          </div>
        </template>
      </yk-popconfirm>
      <yk-text type="primary" @click="showModal">
        <IconSettingsOutline style="margin-right: 4px;"></IconSettingsOutline>
        管理分组
      </yk-text>
    </yk-space>
    <yk-modal v-model="visible" @onSubmit="visible = false" title="管理分组">
      <subsetManage></subsetManage>
    </yk-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useSubsetStore } from '@/stores/subset';
import subsetManage from './subsetManage.vue';
import { useSubset } from '@/hooks/subset';



const subsetStore = useSubsetStore();
const emits = defineEmits(['nowSubset'])

const {
  inputValue,
  selected,
  changeOption,
  rawSubset,
  cancel,
  confirm,
  showModal,
  visible,
  getState,
  state
} = useSubset(emits);
const props = defineProps({
  classify: {
    type: Number,
    default: -1
  }
})



onMounted(() => {
  rawSubset(props.classify);
  if (props.classify === 0) {
    getState();
  }
});
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #3a7bd5;
@primary-light: rgba(58, 123, 213, 0.1);
@primary-border: rgba(58, 123, 213, 0.3);
@text-color: #333;
@light-text: #666;
@bg-white: #ffffff;
@bg-light: #f7f9fc;
@border-color: #e8ecf1;
@transition-time: 0.3s;

// 主容器
.subset {
  padding: 16px 20px;
  border-radius: 12px;
  background-color: @bg-light;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid @border-color;

  // 管理按钮容器
  .yk-text {
    cursor: pointer;
    transition: color @transition-time;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: @primary-color;
    padding: 6px 12px;
    border-radius: 16px;

    &:hover {
      background-color: @primary-light;
      color: darken(@primary-color, 10%);
    }

    svg {
      transition: transform @transition-time;
      margin-right: 6px;
    }

    &:hover svg {
      transform: scale(1.1);
    }
  }

  // 分类菜单项
  &__menu {
    padding: 6px 14px;
    background: @bg-white;
    border-radius: 18px;
    line-height: 24px;
    user-select: none;
    cursor: pointer;
    transition: all @transition-time;
    font-size: 14px;
    color: @light-text;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

    &:hover {
      background-color: @bg-white;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
      border-color: @border-color;
    }

    // 选中状态
    &-selected {
      background: @primary-light;
      color: @primary-color;
      font-weight: 500;
      border-color: @primary-border;

      &:hover {
        background: @primary-light;
        border-color: @primary-border;
      }
    }
  }
}

// 响应式样式
@media (max-width: 992px) {
  .subset {
    padding: 14px 16px;

    &__menu {
      padding: 5px 12px;
      font-size: 13px;
    }
  }
}

@media (max-width: 768px) {
  .subset {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .yk-space {
      flex-wrap: wrap;
      gap: 8px;
    }

    &__menu {
      font-size: 13px;
      line-height: 22px;
      margin-bottom: 4px;
    }

    .yk-text {
      font-size: 13px;
      padding: 5px 10px;
    }
  }
}

@media (max-width: 480px) {
  .subset {
    padding: 10px 12px;
    border-radius: 10px;

    &__menu {
      padding: 4px 10px;
      font-size: 12px;
      border-radius: 14px;
    }

    .yk-text {
      font-size: 12px;
      padding: 4px 8px;

      svg {
        margin-right: 4px;
        width: 14px;
        height: 14px;
      }
    }
  }
}

// 弹出窗口样式增强
:deep(.yk-popconfirm-content) {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

  .yk-input {
    border-radius: 8px;

    &:focus-within {
      border-color: @primary-color;
      box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.2);
    }
  }
}

:deep(.yk-modal) {
  .yk-modal-content {
    border-radius: 14px;
    overflow: hidden;
  }

  .yk-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid @border-color;
  }

  .yk-modal-body {
    padding: 20px;
  }

  .yk-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid @border-color;
  }
}
</style>
